<template>
  <div class="playlists">
    <div class="w1200">
      <div class="playlist-type">
        <div
          :class="['type-box' + index]"
          v-for="(val, key, index) in categories"
          :key="index"
        >
          <h3 class="box-title" :style="index===0?'marginLeft:4px':''">{{ val }}</h3>
          <div class="box-main">
            <span v-for="item in sub[key].slice(0, 8)" @click="selectType(item)" :class="isactive===item.name?'active':''" :key="item.id">{{
              item.name
            }}</span>
            <el-popover placement="bottom" trigger="click">
              <span v-if="sub[key].length > 8" slot="reference" :class="moretxt===index?'active':''">更多</span>
              <div class="ep-content">
                <span v-for="item in remainList[index - 1]" @click="selectType(item,index)" :class="isactive===item.name?'active':''" :key="item.id">{{
                  item.name
                }}</span>
              </div>
            </el-popover>
          </div>
        </div>
      </div>
    </div>
    <nifinplay :params="params" :isScroll="true"></nifinplay>
  </div>
</template>
<script>
import Nifinplay from "@/components/common/Nifinplay.vue";
export default {
  components: {
   Nifinplay
  },
  data() {
       return {
      isactive:'全部',
      moretxt:0,
      categories: {}, //title列表
      sub: [], //分类列表详情
      remainList: [], //剩余列表
      params: { limit: 50, offset: 0, cat: "", order: "hot" },
    };
  },
   created() {
     this.getCatList();
  },
  computed: {},

  methods: {
    async getCatList() {
      const res = await this.$api.getCatList();
      this.categories = res.categories;
      for (let key in res.categories) {
        this.sub.push(res.sub.filter((item) => item.category === Number(key)));
        // this.sub[0].unshift('全部')
        if (this.sub[key].length > 8) {
          this.remainList.push(this.sub[key].slice(9));
        }
      }
      this.sub[0].unshift({name:'全部'})
    },
    selectType(item,index){
       this.moretxt=0;
      this.params.cat=item.name;
      this.isactive=item.name;
      if(index){
       this.moretxt=index;
      }
    },
  },
};
</script>
<style lang="less" scoped>

.ep-content {
  min-width: 100px;
  height: 60px;
  display: flex;
  justify-content: space-around;
  padding: 15px;
  padding-left: 50px;
  span {
    display: inline-block;
    font-size: 14px;
    line-height: 30px;
    width: 78px;
    height: 30px;
    text-align: center;
    color: #333;
    cursor: pointer;
  }
   .active{
          background-color: #ff641e !important;
          color: #fff !important;
          border-radius: 4px;
        }
}
.playlists {
  width: 100%;
  .w1200 {
    width: 1200px;
    margin: 0 auto;
    .playlist-type {
      width: 100%;
      height: 196px;
      padding: 40px 0;
      display: flex;
      justify-content: space-between;
      .box-title{
        margin-left: 20px;
        padding-bottom: 10px;
        text-align: center;
        width: 60px;
        // border: 1px solid red;
      }
    }
    .box-main {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding-left: 10px;
      border-right: 1px solid #f5f5f5;
      span {
        display: inline-block;
        font-size: 14px;
        line-height: 26px;
        text-align: center;
        width: 78px;
        height: 30px;
        color: #333;
        cursor: pointer;
      }
      .active {
          background-color: #ff641e !important;
          color: #fff !important;
          border-radius: 4px;
        }
    }
    .type-box0 {
      flex: 1;
      span {
        width: 48px;
        height: 30px;
      }
    }
    .type-box1 {
      flex: 2;
    }
    .type-box2 {
      flex: 2;
    }
    .type-box3 {
      flex: 2;
    }
    .type-box4 {
      flex: 2;
    }
  }
}
</style>
